<template>
	<view class="wallet-page">
		<!-- 没有钱包 -->
		<view class="create-box" v-if="!hasWallet">
			<text>你还没有钱包</text>
			<button @click="handleToggleProtocol">
				<uni-icons type="plusempty" color="white" size="14"></uni-icons>
				生成钱包
			</button>
		</view>
		<!-- 存在钱包 -->
		<view v-if="hasWallet">
			<wallet-home v-if="!needWalletPassword" />
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" width="720rpx" @close="handleClose">
			<view class="u-p-20 popup-box">
				<view class="protocol-header">
					<text>数字钱包服务协议</text>
					<view class="protocol-close" @click="handleToggleProtocol">
						<uni-icons type="closeempty" size="20"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y class="protocol" @scrolltolower="handleScroll">
					一、服务定义<br />

					数字钱包服务是指由我们提供的用于存储、管理和交易数字资产（包括但不限于积分、通证、NFT等）的在线服务。用户通过数字钱包可以进行资产的存取、转账、查询等操作。<br />

					二、用户义务与责任<br />

					数字钱包的使用<br />

					数字钱包仅限本人使用，用户需妥善保管数字钱包的登录信息和密码。用户不得出租、出借、出售或购买数字钱包。<br />

					密码管理<br />

					用户应自行设置并妥善保管数字钱包密码。密码长度需为8-16个字符，包含符号、数字及英文字母（大小写）。用户需对因密码泄露或保管不当导致的任何损失承担责任。<br />

					合法合规使用<br />

					用户承诺不利用数字钱包服务从事任何非法活动，包括但不限于洗钱、恐怖融资、赌博、贩卖违禁物品等。<br />

					信息真实<br />

					用户需提供真实、准确的个人信息以完成注册和使用。用户授权我们根据法律法规要求，对用户信息进行必要的查询和核实。<br />

					三、服务提供方的权利与义务<br />

					服务维护与升级<br />

					我们有权根据业务发展需要对数字钱包服务进行版本升级或系统维护。如用户继续使用服务，需按照相应流程完成升级。<br />

					信息保护<br />

					我们将采取合理措施保护用户的个人信息和交易数据的安全，但用户需理解因不可抗力或技术故障导致的信息泄露或服务中断，我们不承担相关责任。<br />

					风险控制<br />

					我们有权根据法律法规和风险控制需要，对用户的交易行为、支付额度等进行限制。<br />

					协议修改与通知<br />

					我们有权对本协议进行修改，并通过官方渠道提前通知用户。用户如不同意修改后的协议内容，有权停止使用服务。<br />

					四、免责条款<br />

					不可抗力<br />

					因不可抗力（如自然灾害、战争、系统故障等）导致服务中断或无法正常提供，我们不承担任何责任。<br />

					用户操作风险<br />

					因用户操作不当、密码泄露或通过非授权方式使用服务导致的损失，由用户自行承担。<br />

					系统维护与升级<br />

					在系统维护、升级或不可预见的技术故障期间，我们不承担因服务中断导致的用户损失。<br />

					第三方因素<br />

					因第三方服务瑕疵、网络拥堵、恶意程序攻击等导致的服务异常，我们不承担相关责任。<br />

					五、法律适用与争议解决<br />

					本协议的签订、效力、解释、履行和争议解决均适用中华人民共和国法律。如发生争议，双方应首先通过协商解决；协商不成的，任何一方可向有管辖权的人民法院提起诉讼。<br />

					六、其他条款<br />

					用户同意并理解，数字钱包服务的使用需遵守相关法律法规及本协议的全部条款。<br />

					用户需定期关注我们发布的最新服务协议或规则，继续使用服务即视为同意相关变更<br />
					<view style="color:red;font-weight: bold;">钱包密码无法找回，请务必妥善保管！</view>
					<view style="color:red;font-weight: bold;">钱包密码无法找回，请务必妥善保管！</view>
					<view style="color:red;font-weight: bold;">钱包密码无法找回，请务必妥善保管！</view>
				</scroll-view>
				<view class="agree-box">
					<button class="agree-btn" :disabled="!canClick" @click="handleCreate">我已详细阅读并同意</button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="walletshow" mode="center" border-radius="14" width="720rpx" :mask-close-able="false">
			<view class="u-p-20 popup-box">
				<view>
					<view class="detail-info">
						<input type="password" v-model="passwordInput" placeholder="请输入钱包密码"
							style="border-radius: 16rpx;" class="border u-p-16 u-m-t-20 font-26" />
					</view>
					<button class="btn-primary" @click="handleConfirmWallet">确定</button>
				</view>
				<view class="popup-header">
					<text>钱包密码</text>
					<view class="popup-close" @click="handleCloseWallet">
						<uni-icons type="closeempty" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		NftWalletApi
	} from "@/api/modules/NftWallet.js"
	import walletHome from "./wallet-home.vue"
	import {
		validateWalletPassword
	} from "@/common/utils/utils.js"
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: "wallet",
		components: {
			walletHome
		},
		data() {
			return {
				walletshow: false,
				passwordInput: "",
				hasWallet: false,
				show: false,
				canClick: false,
				needWalletPassword: false
			}
		},
		computed: {
			...mapGetters({
				walletAddress: "user/getWalletAddress"
			}),
		},
		mounted() {
			if (!this.walletAddress) {
				this.handleFetchUserWallet()
			} else {
				this.hasWallet = true
				setTimeout(() => {
					const value = uni.getStorageSync('needWalletPasswd');
					value ? this.walletshow = true : this.walletshow = false
					this.needWalletPassword = value
				}, 50);
			}
		},
		methods: {
			...mapMutations("user", [
				"SET_WALLET_ADDRESS",
				"SET_WALLET_PRIVATEKEY"
			]),
			async handleConfirmWallet() {
				try {
					this.$ShowLoading();
					if (!this.passwordInput.trim()) return this.$HideLoading()
					const res = await validateWalletPassword(this.passwordInput);
					if (!res || res.code !== 1) {
						this.$Toast(res?.msg || "验证失败");
						return;
					}
					uni.setStorageSync('needWalletPasswd', false)
					this.needWalletPassword = false
					this.walletshow = false
					this.passwordInput = ""
				} catch {

				} finally {
					this.$HideLoading()
				}
			},
			async handleFetchUserWallet() {
				const res = await NftWalletApi.getUserWallet()
				if (res.code == 1) {
					this.hasWallet = true
					this.SET_WALLET_ADDRESS(res.data.address)
					this.SET_WALLET_PRIVATEKEY(res.data.sk_key)
				} else {
					this.hasWallet = false
					this.walletshow = false
				}
			},
			handleCloseWallet() {
				this.walletshow = false
				this.passwordInput = ""
				this.$emit('cancel')
			},
			handleToggleProtocol() {
				this.show = !this.show
			},
			handleCreate() {
				this.show = false
				uni.navigateTo({
					url: "/pages/mine/mineBalance/asset/create-wallet"
				})
			},
			handleScroll() {
				this.canClick = true;
			},
			handleClose() {
				this.canClick = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.wallet-page {
		padding-top: 100rpx;
		background-color: #fff;
	}

	.create-box {
		/* #ifdef H5 */
		min-height: calc(100vh - var(--window-top) - 100rpx);
		/* #endif */
		/* #ifndef H5 */
		min-height: calc(100vh - 100rpx);
		/* #endif */
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 32rpx;

		text {
			font-size: 28rpx;
		}

		button {
			background-color: var(--mainColor);
			font-size: 28rpx;
			color: #fff;
			display: flex;
			align-items: center;
			gap: 10rpx;
		}
	}

	.popup-box {
		position: relative;
	}

	.protocol-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 28rpx;
		}

		.protocol-close {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}

	.protocol {
		// #ifndef APP-PLUS
		height: 900rpx;
		// #endif
		// #ifdef APP-PLUS
		height: 600rpx;
		// #endif
		overflow-y: scroll;
		font-size: 28rpx;
		line-height: 72rpx;
		padding-bottom: 120rpx;
		padding-top: 80rpx;
	}

	.agree-box {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
	}

	.agree-btn {
		background-color: var(--mainColor);
		font-size: 28rpx;
		color: #fff;
	}

	.detail-info {
		margin-top: 40rpx;
		border-radius: 16rpx;
		padding: 40rpx;
	}

	.gray-bg {
		background: rgba(0, 0, 0, 0.02);
	}

	.popup-box {
		position: relative;
	}

	.popup-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 28rpx;
		}

		.popup-close {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}

	.btn-primary {
		font-size: 28rpx;
		color: #fff;
		background-color: var(--mainColor);
		margin-top: 80rpx;
	}
</style>